<template>
	<view class='page_cont'>
		<view class='page_top'>
			<textarea class='input' maxlength="200" placeholder="请输入留言" placeholder-style="color: rgba(149,152,163,0.5);" @input="input_value" :value="content"></textarea>
			<view class='num'>200 字以内</view>
		</view>
		<view class='point'>
			<image class='icon' src="/static/icon52.png"></image>
			<view class='text'>反馈意见不能为空</view>
		</view>
		<view class='choose_wrap'>
			<view class='choose_item' v-for="(item,index) in img_list" :key="index" @click="choose_img(index)">
				<image class='img' :src="item.url" v-if="item.url"></image>
				<view class='img_box' v-else><image class='icon' src="/static/icon49.png"></image></view>
			</view>
		</view>
		<view class='point'>
			<image class='icon' src="/static/icon52.png"></image>
			<view class='text'>还可以上传截图进行反馈</view>
		</view>
		<view class="sub_btn" @click="confirm_back()">提交意见</view>
	</view>

</template>

<script>
	import config from "../../api/config.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return{
				content: '',
				img_list:[{url:''},{url:''},{url:''}],
				userinfo: ''
			}
		},
		onLoad() {
			this.userinfo=uni.getStorageSync("userinfo");
		},
		methods:{
			// 留言
			input_value(e){
				this.content=e.detail.value;
			},
			// 上传图片
			choose_img(index){
			    var that = this;
			    uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success(res){
						// console.log(res)
						wx.showLoading({title: '上传中'})
						that.get_oss(res,index)
					}
			    })
			},
			// 提交信息
			confirm_back(){
			    if(!this.content||util.testWord(this.content)){
					util.page_show_toast('反馈意见不能为空',1500)
					return false;
			    }
			    this.set_feedback()
			},
			// 获取oss上传图片
			get_oss:function(file,index){
			    var that=this,randomStr=util.randomString(13);
			    var params={
					"isPublic": true,
					"isHttps": true
			    }
			    config.get_oss(params).then(res=>{
			        var info=res.data.data;
			        uni.uploadFile({
						url: info.host,
						filePath: file.tempFilePaths[0],
						name: 'file',
						formData: {
							"key": randomStr,
							"policy": info.policy,
							"OSSAccessKeyId": info.accessKeyId,
							"signature": info.signature,
							"success_action_status": '200',
						},
						success(){
							wx.hideLoading()
							var img=info.host+'/'+randomStr;
							that.img_list[index].url=img;
						},
			        })
			    })
			},
			// 反馈
			set_feedback(){
				var params={
					"phone": this.userinfo.phone,
					"content": util.removeAllSpace(this.content),
					"picList": this.img_list
				}
				config.set_feedback(params).then(res=>{
					util.page_show_toast('谢谢您的反馈意见',1500)
					this.content='';
					this.img_list=[{url:''},{url:''},{url:''}];
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},1500)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F7F9FB;
		.page_cont{
			padding: 32rpx 32rpx 0 32rpx;
			.page_top{
				padding: 24rpx;
				height: 252rpx;
				box-sizing: border-box;
				background: #fff;
				margin-bottom: 24rpx;
				border-radius: 10rpx;
				.input{
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #424752;
					height: 180rpx;
					width: 100%;
				}
				.num{
					text-align: right;
					color: #9598A3;
					font-size: 20rpx;
					font-weight: 400;
				}
			}
			.point{
				display: flex;
				flex-direction: row;
				align-items: center;
				.icon{
				  width: 28rpx;
				  height: 28rpx;
				  margin-right: 8rpx;
				  margin-top: 2rpx;
				}
				.text{
				  flex: 1;
				  height: 34rpx;
				  font-size: 24rpx;
				  font-weight:400;
				  line-height:34rpx;
				  color:rgba(149,152,163,1);
				}
			}
			.choose_wrap{
				margin: 48rpx 0 24rpx 0;
				display: flex;
				flex-direction: row;
				.choose_item{
					width: 208rpx;
					height: 208rpx;
					background: #fff;
					border-radius: 10rpx;
					&:nth-child(2){
						margin: 0 32rpx;
					}
					.img{
					  width: 100%;
					  height: 100%;
					}
					.img_box{
						width: 60rpx;
						height: 60rpx;
						margin: 75rpx auto 0 auto;
						.icon{
						  width: 100%;
						  height: 100%;
						}
					}
					
				}
			}
			.sub_btn{
			  height: 104rpx;
			  line-height: 104rpx;
			  text-align: center;
			  background: #5B90FF;
			  border-radius: 16rpx;
			  font-size: 36rpx;
			  font-weight: 600;
			  color:rgba(255,255,255,1);
			  letter-spacing:6rpx;
			  margin-top: 400rpx;
			}
		}
	}
</style>
